<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>{$Think.lang.system_notice}</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="INDEX/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="INDEX/css/main.css"/>
		<style type="text/css">
			.notice_list{
				width: 100%;
				background: #FFFFFF;
				margin-bottom: 0.7em;
			}
			.notice_list_top div{
				width: 100%;
				font-size: 0.8em;
				overflow: hidden;				
				white-space: nowrap;				
				text-overflow: ellipsis;				
				color: #000;
				margin-bottom: 0;
				padding: 0.8em 0.6em;
				border-bottom: 1px solid #F2F2F2;
			}
			.notice_list_bottom div{
				    font-size: 0.7em;
				    padding: 0.6em;
				    display: flex;
				    justify-content: space-between;
			}
			.float_div{
				display: none;
			    position: fixed;
			    top: 0;
			    left: 0;
			    z-index: 999;
			    width: 100%;
			    height: 100%;
			    background-color: rgba(235,235,235,0.5);
			}
			.float_div div{
				width: 50%;
				height: 20%;
				background: #FFFFFF;
				position: fixed;
				top: 35%;
				left: 25%;
				font-size: 0.8em;
				padding: 0.5em;
				border-radius: 10px;
			}
           .mui-switch{
      		width:36px;
        	height:18px;
      }
      header div{
      		top : 30%;
      }
      .mui-switch .mui-switch-handle{
      		width:20px;
        	height:20px;
        left:-4px;
        top: -3px;
      }
      .mui-switch.mui-active:before{
      	top:-3px;
        left:1px;
      }
      .mui-switch.mui-active .mui-switch-handle {
    	-webkit-transform: translate(43px,0);
    	transform: translate(20px,0);
		}
      .mui-switch:before{
      		top:-3px;
        	left:15px;
      }
		</style>
	</head>

	<body>
		<script src="INDEX/js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<script src="INDEX/js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>	
		<script>
			mui.init();
		</script>
		<header class="mui-bar mui-bar-nav">
			<a href="#offCanvasSide" class="right_top"></a>
			<!--<a class="mui-switch "></a>-->
			<div class="mui-switch mui-pull-right {if $think_var=='zh-cn'}mui-active{/if}" id="mySwitch">
  				<div class="mui-switch-handle"></div>
			</div>
			<h1 class="mui-title">{$Think.lang.project_title}</h1>
		</header>
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in float_div_parent">
			<div id="header">{include file='header'/}</div>
			<div class="mui-inner-wrap">
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper mui-slide-in">
					<div class="mui-scroll">
						<div class="notice_content">
							<div class="notice_list">
                                {foreach $result as $res}
								<div class="notice_list_top" id>
									<div>{$res['message']}</div>
								</div>
								<div class="notice_list_bottom">
									<div>
										<span style="color:#A8A8A8 ;">{$res['create_time']}</span>
										<span class="show_detail encrypt" style="color:#3FAAEA;" id="{$res['id']}">{$Think.lang.not_detail}>></span>
									</div>
                                </div>
                                {/foreach}
							</div>
							
						</div>
					</div>
				</div>
            </div>	
            {foreach $result as $res}
			<div class="float_div float_div{$res['id']}" id="{$res['id']}">
				<div>{$res['message']}</div>
            </div>
            {/foreach}
		</div>
	</body>
	<script src="INDEX/js/switchover.js"></script>
	<script type="text/javascript">
      mui('#offCanvasSideScroll').scroll();
				mui('#offCanvasContentScroll').scroll();
            // var show_detail = document.getElementsByClassName("show_detail")[0];
            // show_detail.addEventListener("tap", function () {
			mui(".notice_list_bottom").on("tap",".encrypt",function(){
				var ids = this.getAttribute("id");
			$(".float_div"+ids).show()
			var user_id=$(this).parent().parent().siblings().children().children("span#user_id").html()
//			$("#user_id").html();
			$("#friend_id").html(user_id);
			var now_date=new Date().toLocaleString();
			$("#time").html(now_date);
		})
		// $(".float_div").click(function(){
            var float_div = document.getElementsByClassName("float_div")[0];
            // float_div.addEventListener("tap", function () {
				mui(".float_div_parent").on("tap",".float_div",function(){
					var ids = this.getAttribute("id");
				$(".float_div"+ids).hide()
			})
	</script>

</html>